<template>
  <div
    class="prompt-wrapper"
    :class="{ active: visible }"
    >
    {{desc}}
    </div>
</template>

<script>
export default {
  name: 'vPrompt',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    desc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
  .prompt-wrapper {
    position: absolute
    left: 50%
    transform: translateX(-50%)
    z-index: 9999
    bottom: 180rpx
    height: 68rpx
    padding: 0 24rpx
    line-height: 68rpx
    background: #fff
    box-shadow: 0 0 6rpx #CCCCCC
    border-radius: 12rpx
    text-align: center
    font-size: 28rpx
    color: #333333
    transition: all .3s ease-out
    opacity: 0
    overflow: hidden
    white-space: nowrap
    &.active {
      opacity: 1
      bottom: 198rpx
    }
  }
</style>
